<template>
    <section class="edit-wrap">
        <h2 class="title">编辑个人信息</h2>
        <div class="underline"></div>

        <el-card class="edit-card">
            <el-form :model="form" label-width="88px">
                <el-form-item label="姓名">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="form.gender" placeholder="请选择">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="form.phone" />
                </el-form-item>
                <el-form-item label="家庭住址">
                    <el-input v-model="form.address" />
                </el-form-item>
                <el-form-item label="健康状况">
                    <el-input type="textarea" v-model="form.health" />
                </el-form-item>
                <div class="btns">
                    <el-button @click="goBack">取消</el-button>
                    <el-button type="success">确认</el-button>
                </div>
            </el-form>
        </el-card>
    </section>
</template>

<script setup>
    import { reactive } from "vue";
    import { useRouter } from "vue-router";
    const router = useRouter();
    const goBack = () => router.back();
    const form = reactive({
        name: "张老先生",
        gender: "男",
        phone: "138****5678",
        address: "北京市海淀区中关村南大街5号",
        health: "良好，患有高血压、轻度糖尿病，需定期服药",
    });
</script>

<style scoped>
    .edit-wrap {
        padding: 32px 20px;
    }
    .title {
        text-align: center;
        font-weight: 800;
        font-size: 24px;
        color: #222;
    }
    .underline {
        width: 80px;
        height: 4px;
        background: #4a7b26;
        border-radius: 2px;
        margin: 10px auto 24px;
    }
    .edit-card {
        max-width: 680px;
        margin: 0 auto;
    }
    .btns {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }
</style>
